<template>
	<view class="nearbyShop-wrapper wrapperLayer borderBox">
		<titleBar :titleText='"附近店铺"'></titleBar>
		<view class="firstCate-container borderBox">
			<scroll-view scroll-x class="cateScroll" scroll-with-animation>
				<block v-for="(items,index) in cateScroll" :key="index">
					<view class="inline-box" @tap="fristCurrent(items)">
						<view class="items-cate colCenCen">
							<view class="items-label">
								{{items.value}}
							</view>
							<view class="border" :class="items.key==cateCurrent?'active-border':''">
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="sortbar-container rowCenBet borderBox">
			<view class="sort-items rowCen" @tap="selectDrowp('cate')">
				<view class="label-txt">
					{{secondCatelabel?secondCatelabel:'全部分类'}}
				</view>
				<image class="downIcon" :class="drowpType=='cate'&&showDrop?'roateIcon':''"
					src="../../static/images/community/down.png" mode=""></image>
			</view>
			<view class="sort-items rowCen" @tap="selectDrowp('radius')">
				<view class="label-txt">
					{{radiusLabel?radiusLabel:'附近'}}
				</view>
				<image class="downIcon" :class="drowpType=='radius'&&showDrop?'roateIcon':''"
					src="../../static/images/community/down.png" mode=""></image>
			</view>
			<view class="sort-items rowCen" @tap="selectDrowp('sort')">
				<view class="label-txt">
					{{sortLabel?sortLabel:'距离最近'}}
				</view>
				<image class="downIcon" :class="drowpType=='sort'&&showDrop?'roateIcon':''"
					src="../../static/images/community/down.png" mode=""></image>
			</view>
		</view>

		<view class="dropdown-list colCen"
			:style="showDrop?'height:' + drowpList.length*88 + 'rpx;transition: all 0.3s;':'height:0rpx;'">
			<block v-for="(items,index) in drowpList" :key="index">
				<view class="drop-items rowCenBet borderBox" @tap="secondCateTap(items)" v-if="drowpType=='cate'">
					<view class="left-label">
						{{items.value}}
					</view>
					<image class="checkIcon" v-if="items.key==secondCurrent"
						src="../../static/images/community/check.png" mode=""></image>
				</view>

				<view class="drop-items rowCenBet borderBox" @tap="radiusTap(items)" v-if="drowpType=='radius'">
					<view class="left-label">
						{{items.value}}
					</view>
					<image class="checkIcon" v-if="items.key==secondCurrent"
						src="../../static/images/community/check.png" mode=""></image>
				</view>

				<view class="drop-items rowCenBet borderBox" @tap="sortTap(items)" v-if="drowpType=='sort'">
					<view class="left-label">
						{{items.value}}
					</view>
					<image class="checkIcon" v-if="items.key==sortCurrent"
						src="../../static/images/community/check.png" mode=""></image>
				</view>
			</block>
		</view>

		<view class="lists-container colCen">
			<block v-for="(items,index) in List" :key="index">
				<view class="items-container rowCen" @tap="goDetails(items)">
					<view class="content-box rowSta">
						<image class="logopic" :src="items.dealBaseInfo.defaultPic" mode="aspectFill"></image>
						<view class="right-content">
							<view class="shopname">
								{{items.shopInfo.shopName}}
							</view>

							<view class="introduce-bar rowCen">
								<block v-for="(star,index) in 5" :key="index">
									<image class="star"
										v-if="(index+1)<(items.shopInfo.shopPower/10) || (index+1)==(items.shopInfo.shopPower/10)"
										src="../../static/images/community/redStar.png" mode=""></image>
									<image class="star"
										v-else-if="(index+1)>(items.shopInfo.shopPower/10) && (index+1 - (items.shopInfo.shopPower/10)<0.5)"
										src="../../static/images/community/harfstar.png" mode=""></image>
									<image class="star" v-else src="../../static/images/community/empstar.png"
										mode=""></image>
								</block>

								<view class="grade-num">
									{{Number(items.shopInfo.shopPower/10).toFixed(1)}}
								</view>

								<view class="cate-txt">
									{{items.shopInfo.cateName}} {{items.shopInfo.regionName}}
									{{items.shopInfo.distanceToShow}}
								</view>
							</view>

							<scroll-view class="slide-goods-list" scroll-with-animation scroll-x>
								<block v-for="(itm,idx) in items.subset" :key="idx">
									<view class="inline-content">
										<image class="goodspic" :src="itm.dealBaseInfo.defaultPic" mode="aspectFill">
										</image>
										<view class="goods-title">
											{{itm.dealBaseInfo.dealTitle}}
										</view>
										<view class="price-bar rowEnd">
											<view class="rmb">
												￥
											</view>
											<view class="nowprice">
												{{(itm.dealBaseInfo.finalPrice/100).toFixed(2)}}
											</view>
											<view class="ordprice">
												￥{{Number(itm.dealBaseInfo.marketPrice/100).toFixed(2)}}
											</view>
										</view>
									</view>
								</block>
							</scroll-view>
						</view>
					</view>
				</view>
			</block>

			<aLoadMore :status="loadstate" mode="loading3" :showTitle='true' color="#999999"></aLoadMore>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateScroll: [],
				cateCurrent: 0,
				secondCatelabel: '',
				secondCurrent: '',

				showDrop: false,
				drowpType: '',
				drowpList: [],

				radiusList: [{
						value: '附近',
						key: ''
					},
					{
						value: '500m',
						key: '500'
					},
					{
						value: '1km',
						key: '1000'
					},
					{
						value: '3km',
						key: '3000'
					},
					{
						value: '5km',
						key: '5000'
					},
					{
						value: '10km',
						key: '10000'
					}
				],
				radiusCurrent: '',
				radiusLabel: '',

				sortList: [{
						value: '离我最近',
						key: 1
					},
					{
						value: '销量由高到低',
						key: 7
					},
					{
						value: '价格由高到低',
						key: 9
					},
					{
						value: '价格由低到高',
						key: 10
					}
				],
				sortCurrent: 1,
				sortLabel: '',
				lcInfo:'',
				cityId:'',

				List: [],
				pageNum: 1,
				loadstate: 'loading',
				canLoad: false,
				canClick: true
			}
		},
		onLoad() {
			this.cityId = uni.getStorageSync('cityInfo').key
			this.lcInfo = uni.getStorageSync('locationInfo')
			this.getCates()
		},
		onPullDownRefresh() {
			this.getCates()
		},
		onReachBottom() {
			this.getNextpage()
		},
		methods: {
			getCates() {
				this.$http.post('mttuangou/cityCategories', {
					cat0Id: 0,
					cityId: this.cityId,
				}).then(res => {
					console.log(res)
					this.cateScroll = res
					this.cateCurrent = res[0].key
					uni.stopPullDownRefresh()
					this.newData()
				})
			},

			getList() {
				console.log(this.sortCurrent);
				this.$http.post('mttuangou/searchDeals', {
					cat0Id: this.cateCurrent,
					cat1Ids: this.secondCurrent,
					cityId: this.cityId,
					lat: this.lcInfo.latitude,
					lng: this.lcInfo.longitude,
					page: this.pageNum,
					radii: this.radiusCurrent,
					sortType: this.sortCurrent,
					size: 20,
				}, 'application/json').then(res => {
					console.log(res);
					this.List = this.List.concat(res)
					var obj = {};
					this.List = this.List.reduce(function(item, next) {
						obj[next.shopInfo.shopId] ? '' : obj[next.shopInfo.shopId] = true && item.push(next);
						return item;
					}, []);
					console.log(this.List)
					if (res.length > 0) {
						this.pageNum++
						this.loadstate = 'loading'
						if (this.List.length < 10) {
							this.getList()
						} else {
							this.canClick = true
							this.canLoad = true
						}
					} else {
						this.canClick = true
						this.canLoad = false
						this.loadstate = 'nomore'
					}
				})
			},

			getNextpage() {
				if (this.canLoad) {
					this.$http.post('mttuangou/searchDeals', {
						cat0Id: this.cateCurrent,
						cat1Ids: this.secondCurrent,
						cityId: this.cityId,
						lat: this.lcInfo.latitude,
						lng: this.lcInfo.longitude,
						page: this.pageNum,
						radii: this.radiusCurrent,
						sortType: this.sortCurrent,
						keyWords: this.searchTxt,
						size: 20,
					}, 'application/json').then(res => {
						console.log(res);
						if (res.length > 0) {
							this.pageNum++
							this.loadstate = 'loading'
							this.canLoad = true
						} else {
							this.canLoad = false
							this.loadstate = 'nomore'
						}
						this.List = this.List.concat(res)
						this.List = this.List.reduce(function(item, next) {
							obj[next.shopInfo.shopId] ? '' : obj[next.shopInfo.shopId] = true && item.push(next);
							return item;
						}, []);
					})
				}
			},

			newData() {
				this.canLoad = false
				this.pageNum = 1
				this.List = []
				this.loadstate = 'loading'
				this.getList()
			},

			selectDrowp(type) {
				this.drowpType = type
				if (this.drowpType != type) {
					this.showDrop = false
				} else {
					if (this.showDrop) {
						this.showDrop = false
					} else {
						if (type == 'cate') {
							this.$http.post('mttuangou/cityCategories', {
								cat0Id: this.cateCurrent,
								cityId: this.cityId,
							}).then(res => {
								console.log(res)
								this.drowpList = res.data
								this.secondCurrent = this.cateCurrent
								this.drowpList.unshift({
									key: '',
									value: '全部分类'
								})
								this.showDrop = true
							})
						} else if (type == 'radius') {
							this.drowpList = this.radiusList
							this.showDrop = true
						} else if (type == 'sort') {
							this.drowpList = this.sortList
							this.showDrop = true
						}
					}
				}
			},

			fristCurrent(info) {
				if (this.canClick) {
					this.showDrop = false
					this.cateCurrent = info.key
					this.secondCatelabel = '全部分类'
					this.secondCurrent = ''
					this.canClick = false
					this.newData()
				}
			},

			secondCateTap(info) {
				console.log(info);
				this.secondCatelabel = info.value
				this.secondCurrent = info.key
				this.showDrop = false
				this.newData()
			},

			radiusTap(info) {
				this.radiusCurrent = info.key
				this.radiusLabel = info.value
				this.showDrop = false
				this.newData()
			},

			sortTap(info) {
				this.sortCurrent = info.key
				this.sortLabel = info.value
				this.showDrop = false
				this.newData()
			},

			goDetails(info) {
				console.log(info.shopInfo.shopId);
				uni.navigateTo({
					url: './shopBuyDetails?id=' + info.shopInfo.shopId
				})
			}
		}
	}
</script>

<style lang="scss">
	.nearbyShop-wrapper {
		width: 100%;
		min-height: 100vh;
		background-color: #FFFFFF;
		padding: 0 26rpx;

		.firstCate-container {
			width: 100%;
			height: 80rpx;
			padding: 0 36rpx;

			.cateScroll {
				width: 100%;
				height: 100%;
				white-space: nowrap;

				.inline-box {
					display: inline-block;
					height: 100%;

					.items-cate {
						height: 100%;
						margin-right: 50rpx;

						.items-label {
							font-size: 30rpx;
							font-weight: 500;
							color: #333333;
							margin-bottom: 10rpx;
						}

						.border {
							width: 60rpx;
							height: 4rpx;
							border-radius: 20rpx;
							background-color: transparent;
						}

						.active-border {
							background-color: #FDE76E;
						}
					}
				}
			}
		}

		.sortbar-container {
			width: 100%;
			height: 80rpx;
			padding: 0 36rpx;
			background-color: #FFFFFF;

			.sort-items {
				.label-txt {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					margin-right: 12rpx;
				}

				.downIcon {
					width: 13rpx;
					height: 8rpx;
					transition: all 0.3s;
				}

				.roateIcon {
					transform: rotate(-180deg);
				}
			}
		}

		.dropdown-list {
			width: 100%;
			overflow: hidden;

			.drop-items {
				width: 100%;
				height: 88rpx;
				background: #FFFFFF;
				box-shadow: 0px -1rpx 0px 0px #EDEDED;
				padding: 0 20rpx;

				.left-label {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
				}

				.checkIcon {
					width: 28rpx;
					height: 18rpx;
				}
			}
		}

		.lists-container {
			width: 100%;

			.items-container {
				width: 100%;
				height: 390rpx;
				background-color: #FFFFFF;
				box-shadow: 0px -1rpx 0px 0px #F8F8F8;

				.content-box {
					width: 100%;

					.logopic {
						width: 112rpx;
						height: 78rpx;
						margin: 0 20rpx;
						border-radius: 12rpx;
					}

					.right-content {
						width: 546rpx;

						.shopname {
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 28rpx;
							font-weight: bold;
							color: #333333;
						}

						.introduce-bar {
							margin-top: 10rpx;

							.star {
								width: 22rpx;
								height: 22rpx;
								margin-right: 5rpx;
							}

							.grade-num {
								margin-left: 15rpx;
								margin-right: 30rpx;
								font-size: 22rpx;
								font-weight: 500;
								color: #FF002C;
							}

							.cate-txt {
								white-space: nowrap;
								font-size: 22rpx;
								font-weight: 500;
								color: #666666;
							}
						}

						.slide-goods-list {
							width: 100%;
							margin-top: 30rpx;
							white-space: nowrap;

							.inline-content {
								display: inline-block;
								width: 158rpx;
								height: 100%;
								margin-right: 10rpx;

								.goodspic {
									width: 158rpx;
									height: 158rpx;
									border-radius: 12rpx;
								}

								.goods-title {
									width: 100%;
									font-size: 24rpx;
									font-weight: 500;
									color: #333333;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									margin: 10rpx 0;
								}

								.price-bar {
									.rmb {
										font-size: 24rpx;
										font-weight: 500;
										color: #FF002C;
										line-height: 24rpx;
									}

									.nowprice {
										font-size: 24rpx;
										font-weight: bold;
										color: #FF002C;
									}

									.ordprice {
										font-size: 18rpx;
										font-weight: 500;
										text-decoration: line-through;
										color: #999999;
										line-height: 24rpx;
										margin-left: 10rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
